<template>
	<view class="bgView">
		<view class="sonView" :style="[{top: StatusBar+5+'px'}]">
			<view style="display: flex;flex: 1;align-items: center;justify-content: center;" @click="backHandle">
				<u-icon name="arrow-left" color="#1F2023" size="28"></u-icon>
			</view>
			<view style="height: 20px;background-color: #E9E9E9;width: 1px;margin-top: 7px;"></view>
			<view style="display: flex;flex: 1;align-items: center;justify-content: center;" @click="homeHandle">
				<u-icon name="home-fill" color="#1F2023" size="28"></u-icon>
			</view>
		</view>
		<view class="topView">
			<view class="logoView">
				<image src="../../static/img/logo.png" class="logo" :style="[{marginTop:TopHeight + 'px'}]"></image>
			</view>
			<view class="userNameView" style="margin-top: 10px;">
				<u--input placeholder="请输入手机号" border="surround" v-model="user.phone" @change="change"
					shape="circle"></u--input>
			</view>
			<view class="inputView2">
				<u--input placeholder="请输入验证码" border="surround" v-model="code"></u--input>
				<image v-show="codeSrc" :src="codeSrc" @click="handleGetDxCode" style="width: 100rpx;height: 60rpx;"></image>
			</view>
			<view class="inputView2">
				<u--input placeholder="请输入短信验证码" border="surround" v-model="user.mobileCode"></u--input>
				<view style="color: #247BFD;font-size: 12px;" @click="getMobileCodeHandle">{{buttonText}}</view>
			</view>
			<view class="userNameView" style="margin-top: 0px;">
				<u--input placeholder="请设置密码" border="surround" v-model="user.password" type="password" @change="change"
					shape="circle"></u--input>
			</view>
			<view class="userNameView" style="margin-top: 10px;">
				<u--input placeholder="请再次设置密码" border="surround" v-model="user.password2" type="password"
					@change="change" shape="circle"></u--input>
			</view>
			<view class="loginBtn" @click="submitHandle">确认</view>
		</view>
	</view>
</template>

<script>
	import {
		CheckPhoneState,
		isJZNull
	} from '../../utils/auth'
	import {
		register,
		apiGetCode
	} from '@/api/login'
	import {
		encrypt
	} from '@/utils/rsaEncrypt'
	import mine from '@/api/mine.js'
	export default {
		data() {
			return {
				checked: false,
				tips: '',
				StatusBar: 0,
				CustomBar: 0, //this.$statusBarHeight
				TopHeight: 0,
				user: {
					phone: '',
					phoneNew: '',
					password: '',
					password2: '',
					mobileNo: '',
					mobileCode: '',
					state: '',
				},
				submitForm: {
					phone: '',
					phoneNew: '',
					password: '',
					mobileNo: '',
					state: '',
				},
				isCounting: false, // 是否正在倒计时
				countdown: 60, // 倒计时总秒数
				timer: null, // 定时器ID
				uuid: undefined, //获取验证码的uuid
				code: undefined,
				codeSrc: null
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (e) => {
					this.StatusBar = e.statusBarHeight;
					let custom = wx.getMenuButtonBoundingClientRect();
					this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
					this.TopHeight = this.CustomBar + 36; //this.StatusBar+this.CustomBar;
				}
			})
		},
		onLoad(options) {
			if (options.phone) {
				this.user.phone = options.phone
			}
			if (options.state) {
				this.user.state = options.state
			}
			this.handleGetDxCode()
		},
		onUnload() {
			// 页面销毁时清除定时器，防止内存泄漏
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
			console.log("销毁")
		},
		computed: {
			// 动态计算按钮文字
			buttonText() {
				return this.isCounting ? `${this.countdown}秒后重发` : '发送验证码';
			}
		},
		methods: {
			async handleGetDxCode() {
				const res = await apiGetCode({
					phone: '13333333333'
				})
				this.uuid = res.uuid
				this.codeSrc = res.img		
			},
			handleGetCode() {
				if (!this.code) {
					return uni.showToast({
						title:'请输入验证码',
						icon: 'error'
					})
				}
				this.getMobileCodeRequest();
			},
			async getMobileCodeHandle() {
				if (this.isCounting) return;
				if (isJZNull(this.user.phone)) {
					uni.showToast({
						title: "手机号不能为空",
						icon: 'none'
					})
					return;
				}
				if (!/^1[0-9]{10}/.test(this.user.phone)) {
					return uni.showToast({
						title: "请输入正确格式！",
						icon: 'none'
					})
				}
				if (!this.code) {
					return uni.showToast({
						title: "请输入短信验证码！",
						icon: 'none'
					})
				}
				this.getMobileCodeRequest()
			},
			getMobileCodeRequest() {
				uni.showLoading({
					title: "正在获取..."
				})
				mine.getMobileCode({
					phone: this.user.phone,
					uuid: this.uuid,
					templateCode: 1925716,
					yzmCode: this.code
				}).then(res => {
					this.isCounting = true;
					this.countdown = 60;
					uni.showToast({
						title: "短信发送成功",
						icon: 'success',
						mask: true
					})
					// 开始倒计时
					this.timer = setInterval(() => {
						this.countdown--;
						if (this.countdown <= 0) {
							this.resetCountdown();
						}
					}, 1000);
				}).catch(err => {
					uni.hideLoading()
					this.resetCountdown()
				}).finally(() => {
					uni.hideLoading()
				})
			},
			resetCountdown() {
				clearInterval(this.timer);
				this.timer = null;
				this.isCounting = false;
				this.countdown = 60;
			},
			// CheckPhoneState,
			backHandle() {
				uni.navigateBack({
					delta: 1
				})
			},
			homeHandle() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			agreementHandle() {
				uni.showModal({
					title: '用户协议'
				})
			},
			privacyPolicyHandle() {
				uni.showModal({
					title: '隐私政策'
				})
			},
			submitHandle() {

				if (isJZNull(this.user.password) || isJZNull(this.user.password2)) {
					uni.showToast({
						icon: 'none',
						title: '密码不能为空'
					})
					return
				}
				if (this.user.password != this.user.password2) {
					uni.showToast({
						icon: 'none',
						title: '两次输入的密码不一致，请重新输入'
					})
					return
				}
				let password = encrypt(this.user.password)
				this.submitForm = {
					phone: this.user.phone,
					phoneNew: this.user.phoneNew,
					password: password,
					mobileCode: this.user.mobileCode
				}
				uni.showLoading({
					title: '正在提交...'
				})
				register(this.submitForm).then(res => {
					uni.setStorageSync("uni_session", res.token)
					uni.setStorageSync("userInfo", JSON.stringify(res.user))

					uni.setStorageSync("currentUserName", this.user.phone)
					uni.setStorageSync("currentPwd", this.user.phoneNew)

					uni.hideLoading()
					uni.switchTab({
						url: '/pages/home/home'
					})
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sonView {
		position: fixed;
		left: 0px;
		width: 81px;
		height: 30px;
		border: 0.5px solid #E9E9E9;
		border-radius: 16px;
		margin-left: 16px;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.bgView {
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		// justify-content: center;
		flex-direction: column;
		overflow-y: auto;
	}

	.topView {
		width: 100vw;
		display: flex;
		flex: 1;
		align-items: center;
		flex-direction: column;
	}

	.logoView {
		width: 100vw;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-top: 30px;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.logo {
		width: 163px;
		height: 76px;
		display: flex;
		justify-content: center;
	}

	.bottomView {
		// background-color: red;
		width: 100vw;
		height: 80px;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.userNameView {
		// background-color: orange;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100vw - 48px);
		height: 48px;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
	}

	.inputView2 {
		width: calc(100vw - 32px);
		margin-left: 10px;
		margin-top: 12px;
		margin-bottom: 12px;
		// background-color: red;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 48px;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
	}

	.tip {
		// background-color: red;
		width: calc(100vw - 48px);
	}

	.tipMsg {
		color: #999EA5;
		font-size: 12px;
		padding-left: 18px;
		padding-right: 18px;
		padding: 5px;
	}

	.loginBtn {
		width: calc(100vw - 48px);
		height: 48px;
		background-color: #247BFD;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: white;
		border-radius: 24px;
		margin-top: 24px;
	}
</style>